<template>
	<div>
		<div class="history" v-for="(item, index) in centerStore.historySearch">
			<p class="historySearch">历史搜索</p>
			<ul v-if="centerStore.historySearch">
				<li class="historyBtn">
					<p>{{ item.name }}</p>
				</li>
			</ul>
		</div>
		<p class="searchResult">搜索结果</p>

		<el-scrollbar height="400px">
			<ul class="searchList">
				<li
					class="item"
					v-for="(item, index) in centerStore.searchList"
					:key="item.id"
					@click="addSearchAvo(item)"
				>
					<svg
						t="1666274844129"
						class="icon heart"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="8253"
						width="10px"
						height="10px"
					>
						<path
							d="M881.664 132.096c-69.632-69.632-167.936-97.28-263.168-75.776-22.528 5.12-35.84 26.624-30.72 49.152s26.624 35.84 49.152 30.72c67.584-15.36 137.216 4.096 186.368 53.248C926.72 292.864 926.72 460.8 823.296 563.2L512 875.52 199.68 564.224c-102.4-103.424-102.4-271.36 0-373.76 77.824-77.824 204.8-77.824 282.624 0l69.632 69.632c8.192 8.192 77.824 76.8 150.528 76.8h5.12c30.72-1.024 57.344-15.36 77.824-39.936 14.336-17.408 11.264-43.008-6.144-57.344-17.408-14.336-43.008-11.264-57.344 6.144-6.144 8.192-12.288 9.216-17.408 10.24-26.624 2.048-70.656-29.696-93.184-53.248L541.696 133.12c-109.568-109.568-288.768-109.568-399.36 0C7.168 268.288 7.168 487.424 142.336 622.592L483.328 962.56c8.192 8.192 18.432 12.288 28.672 12.288 10.24 0 20.48-4.096 28.672-12.288l340.992-340.992c65.536-65.536 101.376-152.576 101.376-244.736 0-92.16-35.84-179.2-101.376-244.736z"
							fill="#333C4F"
							p-id="8254"
						></path>
						<path
							d="M240.64 233.472c-33.792 30.72-50.176 76.8-50.176 136.192 0 22.528 18.432 40.96 40.96 40.96s40.96-18.432 40.96-40.96c0-34.816 8.192-60.416 23.552-74.752 18.432-17.408 44.032-16.384 46.08-16.384 22.528 2.048 41.984-15.36 44.032-37.888 2.048-22.528-15.36-41.984-37.888-44.032-7.168-1.024-63.488-4.096-107.52 36.864z"
							fill="#333C4F"
							p-id="8255"
						></path>
					</svg>
					<p class="text">
						<span>{{ item.name }}</span>
						<span>{{ item.description }}</span>
					</p>
					<svg
						t="1666275164148"
						class="icon plus"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="9166"
						width="200"
						height="200"
					>
						<path
							d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
							p-id="9167"
							fill="#8a8a8a"
							data-spm-anchor-id="a313x.7781069.0.i3"
						></path>
					</svg>
				</li>
			</ul>
		</el-scrollbar>
	</div>
</template>

<script lang="ts" setup>
import { useUserInfoStore } from '../../store/userInfo'
const centerStore = useUserInfoStore()
let addSearchAvo = (item) => {
	let flag = centerStore.avocation.findIndex((i) => i.id === item.id)
	if (flag === -1) {
		if (centerStore.avocation.length < 7) {
			centerStore.avocation.push(item)
		}
	} else {
		centerStore.avocation.splice(flag, 1)
	}
	// 添加到历史记录
	centerStore.historySearch.push(item)
	emit('changeSearchShow')
}
// 父组件的方法，点击添加时返回
let emit = defineEmits(['changeSearchShow'])
</script>

<style scoped>
.history {
	height: 90px;
}
.historySearch {
	height: 16px;
	padding-bottom: 14px;
}
.searchResult {
	margin-top: 8px;
	margin-bottom: 20px;
}
.historyBtn {
	float: left;
	margin-right: 20px;
	list-style: none;
	width: 48px;
	height: 38px;
	font-size: 12px;
	line-height: 38px;
	text-align: center;
	padding: 0 22px;
	border-radius: 4px;
	background-color: #eee;
}
.searchList {
	margin-top: 10px;
	overflow: auto;
}
.item {
	list-style: none;
	width: 270px;
	height: 38px;
	background-color: #eee;
	padding: 15px;
	border-radius: 4px;
	float: left;
	margin-right: 25px;
	margin-bottom: 20px;
}
.heart {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	padding: 10px;
	background-color: #fff;
	border-radius: 4px;
	float: left;
}
.text {
	float: left;
	margin-left: 10px;
}
span {
	display: block;
	height: 22px;
	width: 200px;
}
.plus {
	display: block;
	width: 16px;
	height: 16px;
	float: left;
	margin-top: 14px;
}
</style>
